// Copyright (c) 2023-2024 FlyByWire Simulations
// SPDX-License-Identifier: GPL-3.0

@import "../MsfsAvionicsCommon/definitions";

@font-face {
  font-family: "Ecam";
  /* noinspection CssUnknownTarget */
  src: url("/Fonts/fbw-a32nx/ECAMFontRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.oanc-container {
  width: 768px;
  height: 768px;
  overflow: hidden;

  background-color: $display-background;

  font-family: "Ecam", monospace !important;
}

.oanc-flag-container {
  position: absolute;

  width: 768px;
  height: 768px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: $display-white;
}

.oanc-flag-container.amber {
  color: $display-amber;
}

.oanc-label {
  position: absolute;

  height: 17px;

  padding-left: 1px;

  font-family: "Ecam", monospace !important;
  font-size: 19px;

  background-color: black;
  color: $display-white;

  white-space: pre;

  pointer-events: auto;
}

.oanc-label:hover {
  outline: 3px solid $display-magenta;
  pointer-events: auto;
  outline-offset: 4px;
}

.oanc-label-style-taxiway {
  color: $display-yellow;
}

.oanc-label-style-terminal-building {
  color: $display-cyan;
}

.oanc-label-style-runway-end {
  display: flex;
  justify-content: center;
  padding-top: 13px;

  width: 70px;
  height: 40px;

  font-size: 32px;

  background-color: transparent;
  background-image: url('');
  background-size: cover;
}

.oanc-label-style-runway-axis {
  color: $display-white;
}

.oanc-button {
  padding: 10px 6px;
  background-color: gray;
  color: white;
  border: 3px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.oanc-top-mask {
  width: 100%;
  height: 60px;
  background-color: $display-background;
}

.oanc-bottom-mask {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  bottom: 0;

  width: 100%;
  height: 32px;
  background-color: $display-background;
}

.oanc-position {
  padding: 1px;
  padding-left: 2px;
  border: solid 1.5px $display-yellow;
  color: $display-yellow;
  font-size: 24px;
}

.oanc-bottom-flag {
  padding: 1px;
  padding-left: 2px;
  color: $display-amber;
}

.oanc-speed-info {
  position: absolute;
  top: 0;
  left: 5px;

  font-size: 24px;
  white-space: pre;
}

#oanc-speed-info-1 {
  padding-right: 35px;

  font-size: 20px;
  vertical-align: bottom;
}

#oanc-speed-info-2 {
  padding-right: 7px;
  color: $display-green;
}

#oanc-speed-info-3 {
  padding-right: 5px;

  font-size: 20px;
  vertical-align: bottom;
}

#oanc-speed-info-4 {
  width: 40px;
  padding-right: 10px;
  color: $display-green;
}

.oanc-wind-info {
  position: absolute;
  top: 27px;
  left: 5px;

  font-size: 24px;
  white-space: pre;
}

#oanc-wind-info-1 {
  color: $display-green;
}

#oanc-wind-info-2 {
  font-size: 20px;
}

#oanc-wind-info-3 {
  color: $display-green;
}

.oanc-airport-info {
  position: absolute;
  right: 0;
  color: $display-white;
  background-color: $display-background;

  font-size: 20px;
  white-space: pre;
}

#oanc-airport-info-line1 {
  top: 5px;
}

#oanc-airport-info-line2 {
  top: 31px;
}

.oanc-airport-not-in-active-fpln {
  position: absolute;
  right: 310px;
  color: $display-white;
  background-color: $display-background;
  text-align: center;
  font-size: 20px;
}

.oanc-airplane-shadow {
  stroke: $display-background;
  stroke-width: 10px;
  fill: none;
}

.oanc-airplane {
  stroke: $display-magenta;
  stroke-width: 7.75px;
  fill: none;
}

.oanc-svg {
  font-family: "Ecam", monospace !important;

  //z-index: 9;
}

.Magenta {
  fill: none;
  stroke: $display-magenta;
}

.Magenta text,
text.Magenta {
  fill: $display-magenta;
  stroke: none;
}

.Cyan {
  fill: none;
  stroke: $display-cyan;
}

.Cyan text,
text.Cyan,
.Cyan tspan,
tspan.Cyan {
  fill: $display-cyan;
  stroke: none;
}

tspan.Cyan {
  fill: $display-cyan;
  stroke: none;
}

.White {
  fill: none;
  stroke: $display-white;
}

.White.Fill {
  fill: $display-white;
  stroke: none;
}

.White text,
text.White {
  fill: $display-white;
  stroke: none;
}

.Green {
  stroke: $display-green;
  color: $display-green;
  fill: none;
}

.Green.Fill {
  fill: $display-green;
  stroke: none;
}

.Green text,
text.Green,
.Green tspan,
tspan.Green {
  fill: $display-green;
  stroke: none;
}

.Amber {
  stroke: $display-amber;
  fill: none;
}

.Amber text,
text.Amber {
  fill: $display-amber;
  stroke: none;
}

.Yellow {
  stroke: $display-yellow;
  fill: none;
}

.Yellow.Fill {
  fill: $display-yellow;
  stroke: none;
}

.Yellow text,
text.Yellow {
  fill: $display-yellow;
  stroke: none;
}

.Red {
  stroke: $display-red;
  fill: none;
}

.Red.Fill {
  fill: $display-red;
  stroke: none;
}

.Red text,
text.Red {
  fill: $display-red;
  stroke: none;
}

.Grey.Fill {
  fill: $display-grey;
  stroke: none;
}

.BackgroundFill {
  fill: $display-background;
}

path.rounded {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shadow {
  stroke: $display-background;
  fill: none;
  stroke-width: 3.5px;
}
.shadow text {
  stroke-width: 1.5px;
}

text.shadow {
  stroke: $display-background;
  stroke-width: 1px;
  paint-order: stroke;
}


$font-factor: 5;

.FontLargest {
  font-size: #{7px * $font-factor};
}

.FontLarge {
  font-size: #{6.5px * $font-factor};
}

.FontMedium {
  font-size: #{6px * $font-factor};
}

.FontIntermediate {
  font-size: #{5.5px * $font-factor};
}

.FontSmall {
  font-size: #{5px * $font-factor};
}

.FontSmallest {
  font-size: #{4.5px * $font-factor};
}

.FontTiny {
  font-size: #{4px * $font-factor};
}

.StartAlign {
  text-align: start;
  text-anchor: start;
}
.MiddleAlign {
  text-align: center;
  text-anchor: middle;
}
.EndAlign {
  text-align: end;
  text-anchor: end;
}
